<template>
  <div id='bing'>
    <div class='binginfo'>
      <h2>饼状图</h2>
      <div ref='main'
        class='main'></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'zhu',
  data() {
    return {
      echart: '',
    }
  },
  mounted() {
    this.echart = echarts.init(this.$refs.main)
    this.setOptions()
  },
  methods: {
    setOptions() {
      let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: '完成成交' },
              { value: 735, name: '部分成交' },
              { value: 580, name: '撤单' },
              { value: 484, name: '待成交' },
            ],
          },
        ],
      }
      option && this.echart.setOption(option)
    },
  },
}
</script>

<style lang='less'>
#bing {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  .binginfo {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    .main {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 50%;
      height: 50%;
    }
    h2 {
      position: absolute;
      left: 50%;
      top: 100px;
      margin-left: -40px;
    }
  }
}
</style>